<template>
  <div>

    <myheader></myheader>

    <main class="" id="main-collapse">

      <div class="hero-full-wrapper">
        <div class="grid">
          <div class="gutter-sizer"></div>
          <div class="grid-sizer"></div>

          <!-- 面包屑导航 -->
          <!--<Breadcrumb :datas="datas"></Breadcrumb>-->
          <bread :datas="this.datas"></bread>

          <br>

          <Form>
            <FormItem label="用户名：">
              <input type="text" v-model="username">

            </FormItem>

            <FormItem label="密码：">
              <input type="password" v-model="password">

            </FormItem>

            <FormItem label="验证码：">
              <input type="text" v-model="code">
              <!--展示文件流验证码-->
              <img :src="src" alt="验证码" @click="change_code">
            </FormItem>

            <!--<FormItem label="验证码：">-->
            <!--<input type="text" v-model="imagegcode">-->
            <!--<img :src="imageurl" alt="验证码" height="50px" @click="refresh">-->
            <!--</FormItem>-->

            <FormItem>
              <Button @click="submit" :loading="isLoading" color="primary">提交</Button>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <Button @click="reset">重置</Button>
            </FormItem>
          </Form>
        </div>
      </div>


    </main>


  </div>

</template>


<script>
  // 导入头部组件
  import myheader from "./myheader.vue";
  // 导入面包屑组件
  import bread from './bread'

  export default {
    data() {
      return {
        msg: "这是一个变量",
        datalist: [],
        // 用户名
        username: '',
        // 密码
        password: '',
        // 是否加载进度条
        isLoading: false,
        // 面包屑变量
        datas: [{title: '首页', route: {name: 'index'}}, {title: '用户注册'}],
        // 验证码
        code: '',
        // 图片地址
        src: 'http://127.0.0.1:8000/mycode/'

        // // 图片验证码
        // imageurl: 'http://127.0.0.1:8000/imagecode/',
        // imagecode: '',
      }
    },

    // 组件化
    components: {
      'myheader': myheader,
      'bread': bread
    },

    mounted: function () {


    },

    methods: {
      // 实时切换验证码
      change_code: function () {
        // 生成随机串
        let num = Math.ceil(Math.random() * 10);

        // 将图片链接加上随机参数
        this.src = this.src + '?random=' + num
      },

      // 提交方法
      submit: function () {
        // 显示进度条
        this.isLoading = true;
        if (this.username == '') {
          this.$Message('用户名不能为空')
        }
        if (this.password == '') {
          this.$Message('密码不能为空')
        }
        if (this.code == '') {
          this.$Message('验证码不能为空')
          // 关闭进度条
          this.isLoading = false;
          return
        }

        // if (this.imagecode == '') {
        //   this.$Message('验证码不能为空')
        //   // 关闭进度条
        //   this.isLoading = false;
        //   return
        // }
        //发送异步请求
        this.axios.get('http://localhost:8000/register/', {
          params: {
            username: this.username,
            password: this.password,
            code: this.code,
            // imagecode: this.imagecode
          }
        }).then((res) => {
          console.log(res);

          // 判断结果
          if (res.data.code == 200) {
            this.$Message('恭喜，注册成功')
            // 跳转页面
            this.$router.push('/login/')
          } else {
            this.$Message(res.data.message)
          }
          // 关闭进度条
          this.isLoading = false;
        })

      },
      // 重置方法
      reset: function () {
        // 进行重置
        this.username = '';
        this.password = '';
      },
      // // 刷新验证码
      // refresh: function () {
      //   let num = Math.random()
      //   this.imageurl = this.imageurl + '?' + num
      // }
    }
  }


</script>

<style>


</style>
